@use '../token/colors';
@use '../token/size';

@mixin jhlite-q-link-light {
  color: colors.$jhlite-global-color-link-light;

  &:hover {
    color: colors.$jhlite-global-color-link-light-hover;
  }
}

@mixin jhlite-q-field {
  box-sizing: border-box;
  border: size.$jhlite-global-size-field-border solid colors.$jhlite-global-color-field-border;
  border-radius: size.$jhlite-global-size-field-radius;
  padding: size.$jhlite-global-size-field-padding;
  line-height: size.$jhlite-global-size-field-line-height;
  font-size: size.$jhlite-global-size-field-font-size;

  &:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 size.$jhlite-global-size-field-border-focus colors.$jhlite-global-color-field-border-focus;
  }

  &:disabled {
    cursor: not-allowed;
    color: colors.$jhlite-global-color-text-disabled;
  }
}
